import React, { Component } from 'react'
// 接收search参数用
// eslint-disable-next-line
import qs from 'querystring'

const DetailData = [
  { id: '01', content: '你好，中国' },
  { id: '02', content: '你好，尚硅谷' },
  { id: '03', content: '你好，未来的自己' }
]
export default class Detail extends Component {
  render() {
    console.log(this.props);
    // 1. 接收params参数
    const { id, title } = this.props.match.params

    // 2. 接收search参数
    // obj {name:'tom',age:18} => urlencoded name=tom&age=18 使用 qs.stringify(obj)
    // 反转使用 qs.parse('name=tom&age=18')
    // const { id, title } = qs.parse(this.props.location.search.slice(1))
    // console.log(id,title)

    // 3. 接收state参数
    // 问题：刷新不会丢失数据, 但是新开一个页签会造成数据丢失！！
    // const { id, title } = this.props.location.state || {}

    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id
    }) || {}
    return (
      <ul>
        <li>ID:{id}</li>
        <li>TITLE:{title}</li>
        <li>CONTENT:{findResult.content}</li>
      </ul>
    )
  }
}
